<template>
  <div class="tabbar">
    <!-- 底部标签栏 -->
    <van-tabbar
      class="tabbar"
      v-model="active"
      active-color="#000"
      inactive-color="#000"
      route
      fixed
    >
      <van-tabbar-item icon="home-o"  replace to="/">
          <span>下厨房</span>
          <template #icon="props">
            <img :src="props.active ? icon.active_home : icon.inactive_home" />
          </template>
      </van-tabbar-item>
      <van-tabbar-item icon="search" replace to="/collect">
          <span>收藏</span>
          <template #icon="props">
            <img :src="props.active ? icon.active : icon.inactive" />
          </template>
      </van-tabbar-item>
        <van-tabbar-item icon="friends-o" replace to="/person">
          <span>我</span>
          <template #icon="props">
            <img :src="props.active ? icon.active_me : icon.inactive_me"/>
          </template>
        </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      icon: {    
        active_home: "http://qxkmdhmin.hn-bkt.clouddn.com/shouye1.png",
        inactive_home: "http://qxkmdhmin.hn-bkt.clouddn.com/shouye2.png",
        active: "http://qxkmdhmin.hn-bkt.clouddn.com/shoucang2.png",
        inactive: "http://qxkmdhmin.hn-bkt.clouddn.com/shoucang0.png",
        active_me: "http://qxkmdhmin.hn-bkt.clouddn.com/wode2.png",
        inactive_me: "http://qxkmdhmin.hn-bkt.clouddn.com/wode.png",
      }
    }
  },
  method:{

  },
  // 监听事件
  watch:{
    
  }
};
</script>
<style lang="scss" >
 .tabbar{
   img{
     width: 25px;
     height: 25px;
   }
 }

</style>
